<template>

  <view>
    <!--
     <PopupSimpleTime ref="arrangePicker" @confirm="onTimeConfirm" @cancel="onTimeCancel" />

  arrangePicker.value.open();
const arrangePicker = ref(null)
  const onTimeConfirm = (time) => {
    info.arrangeTime = time;
  };

  const onTimeCancel = () => {
    console.log('Time selection cancelled');
  };
     -->
    <uni-popup ref="popup" type="bottom">
      <view class="popup-content">
        <picker mode="multiSelector" :range="timeArray" :value="timeIndex" @change="handleTimeChange"
          @columnchange="handleColumnChange">
          <view class="picker-view">
            {{ formatSelectedTime() }}
          </view>
        </picker>
        <view class="button-group">
          <button @click="cancel">取消</button>
          <button @click="confirm" type="primary">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive,
    computed
  } from 'vue';

  const emit = defineEmits(['confirm', 'cancel']);

  const popup = ref(null);
  const timeArray = ref([]);
  const timeIndex = ref([0, 0, 0, 0, 0]);

  const initTimeArray = () => {
    const date = new Date();
    const years = [];
    const months = [];
    const days = [];
    const hours = [];
    const minutes = [];

    for (let i = date.getFullYear(); i <= date.getFullYear() + 10; i++) {
      years.push(i + '年');
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i < 10 ? '0' + i + '月' : i + '月');
    }
    for (let i = 1; i <= 31; i++) {
      days.push(i < 10 ? '0' + i + '日' : i + '日');
    }
    for (let i = 0; i < 24; i++) {
      hours.push(i < 10 ? '0' + i + '时' : i + '时');
    }
    for (let i = 0; i < 60; i++) {
      minutes.push(i < 10 ? '0' + i + '分' : i + '分');
    }

    timeArray.value = [years, months, days, hours, minutes];
  };

  initTimeArray();

  const handleTimeChange = (e) => {
    timeIndex.value = e.detail.value;
  };

  const handleColumnChange = (e) => {
    const column = e.detail.column;
    const value = e.detail.value;

    timeIndex.value[column] = value;

    if (column === 1) {
      // 月份变化，更新日期
      const year = timeArray.value[0][timeIndex.value[0]].slice(0, -1);
      const month = timeArray.value[1][value].slice(0, -1);
      const days = new Date(year, month, 0).getDate();

      const newDays = [];
      for (let i = 1; i <= days; i++) {
        newDays.push(i < 10 ? '0' + i + '日' : i + '日');
      }
      timeArray.value[2] = newDays;
    }
  };

  const formatSelectedTime = () => {
    return timeArray.value.map((arr, i) => arr[timeIndex.value[i]]).join(' ');
  };

  const confirm = () => {
    emit('confirm', formatSelectedTime());
    popup.value.close();
  };

  const cancel = () => {
    emit('cancel');
    popup.value.close();
  };

  const open = () => {
    popup.value.open();
  };

  defineExpose({
    open
  });
</script>

<style>
  .popup-content {
    background-color: #fff;
    padding: 20px;
  }

  .picker-view {
    text-align: center;
    line-height: 50px;
  }

  .button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
</style>
